<template>
    <layout-default name="fun" :loaded="true">
        <div class="fun-header" slot="header">
            <div class="h-title">
                <span>社区热帖</span>
            </div>
            <div class="h-btn">
                <i class="iconfont icon-fabiaoyouji"></i>
            </div>
        </div>
        <div class="fun-view">
            <div class="v-cards">
                <div class="c-item">
                    <div class="i-header">
                        <div class="h-left">
                            <div class="l-avatar">
                                <img src="//cdn.kyeteo.cn/FpfQsM2ghNmiIJ89BHONjUZR80os" alt="">
                            </div>
                            <div class="l-author">
                                <div class="a-name">
                                    <span>kyeteo</span>
                                </div>
                                <div class="a-saying">
                                    <span>微服务架构设计 嵌入式开发</span>
                                </div>
                            </div>
                        </div>
                        <div class="h-right">
                            <span>关注</span>
                        </div>
                    </div>
                    <div class="i-post">
                        <p>请问下载地址在哪里呀？</p>
                    </div>
                    <div class="i-refer">
                        <div class="r-wrap">
                            <div class="w-title">
                                <span>#[玩转Nginx]Nginx开启SSL</span>
                            </div>
                            <div class="w-img">
                                <div class="img-item">
                                    <img src="//cdn.kyeteo.cn/FsF5jyDlm1kcXmZmnuq8oohhnlij" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="i-do">
                        <div class="d-item">
                            <i class="iconfont icon-dianzan"></i>
                            <span>赞</span>
                        </div>
                        <div class="d-item">
                            <i class="iconfont icon-pinglun"></i>
                            <span>评论</span>
                        </div>
                        <div class="d-item">
                            <i class="iconfont icon-fankui"></i>
                            <span>跟帖</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </layout-default>
</template>

<style lang="less">
    .fun {
        .fun-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            background: white;
            z-index: 1000;

            .h-title {
                display: flex;
                align-items: center;
                height: 100px;
                span{
                    color: #71777c;
                }
            }

            .h-btn {
                position: absolute;
                top: 50%;
                right: 30px;
                transform: translateY(-50%);

                i {
                    font-size: 50px;
                }
            }
        }
        .fun-view{
            padding-top: 100px;
            .v-cards{
                padding: 20px 0;
                .c-item{
                    background: white;
                    .i-header{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 136px;
                        padding: 0 30px;
                        .h-left{
                            display: flex;
                            align-items: center;
                            .l-avatar{
                                width:80px;
                                height: 80px;
                                border-radius: 40px;
                                overflow: hidden;
                                img{
                                    width:100%;
                                    height: 100%;
                                }
                            }
                            .l-author{
                                padding-left: 20px;
                                .a-name{
                                    span{
                                        font-size: 34px;
                                    }
                                }
                                .a-saying{
                                    padding-top: 10px;
                                    span{
                                        font-size: 28px;
                                        color: #71777c;
                                    }
                                }
                            }
                        }
                        .h-right{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width:140px;
                            height: 58px;
                            box-sizing: border-box;
                            border:1px solid #007fff;
                            span{
                                color:#007fff;
                            }
                        }
                    }
                    .i-post{
                        padding: 0 30px 20px 30px;
                    }
                    .i-refer{
                        padding: 0 30px;
                        .r-wrap{
                            padding: 20px;
                            background: #f7f7f7;
                            .w-title{
                                padding-bottom: 20px;
                                span{
                                    color:#71777c;
                                }
                            }
                            .w-img{
                                display: flex;
                                flex-wrap: wrap;
                                .img-item{
                                    width:283px;
                                    height: 283px;
                                    img{
                                        width:100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }
                    .i-do{
                        display: flex;
                        height: 82px;
                        padding: 0 30px;
                        .d-item{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex:1;
                            color:#71777c;
                            i{
                                font-size: 40px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>